<template>
    <div>
        <ul class="mui-table-view">
            <li class="mui-table-view-cell mui-media" v-for="item in list" :key="item.id">
                <router-link :to="'/HomePage/Newsinfo?id='+item.id+'&title='+item.title+'&time='+item.time+'&content_id='+item.content_id+'&img='+item.img">
                    <img class="mui-media-object mui-pull-left" :src="item.img">
                    <div class="mui-media-body">
                        <div class="mui-ellipsis news-title" v-text="item.title"></div>
                        <p class='mui-ellipsis news-props'> 
                            <span>发表时间：{{item.time}}</span>
                            <span>点击次数：{{item.hits}}</span>
                        </p>
                    </div>
                </router-link>
            </li>
        </ul>
    </div>
</template>  

<style scoped>
    .news-title{
        font-size: 14px
    }
    .news-props{
        font-size: 9px;
        display:flex;
        justify-content: space-between;
    }
    
</style>

<script>

export default {
    data(){
        return{
            list:[]
        }
    },
    created(){
        this.$http.post('http://192.168.0.197:88/getNewsByPage',{pageNo:"1",pageSize:"10"},{emulateJSON:true}).then(function(res){
            console.log(res.body.data);
            this.list=res.body.data;   
                },function(res){
                    console.log(res.status);
                });
    }
   
}
</script>
<style scoped>
    .news-title{
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow:ellipse;
    }
</style>